<template>
  <div class="columns">
    <div class="column is-full">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span><i class="fa fa fa-book"> {{ $t('post.theme') }} </i></span>
        </div>
        <div>
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            class="demo-ruleForm"
          >
            <el-form-item prop="title">
              <el-input 
              v-model="ruleForm.title" 
              @blur="ruleForm.title=$event.target.value.trim()"
              :placeholder="$t('post.enterTopic')" />
            </el-form-item>

            <!--Markdown-->
            <div id="vditor" />

            <b-taginput
              v-model="ruleForm.tags"
              class="my-3"
              maxlength="15"
              maxtags="3"
              ellipsis
              :placeholder="$t('post.enterTag')"
            />

            <el-form-item>
              <el-button 
              type="primary" 
              :disabled="submitting"
              @click="submitForm('ruleForm')"
                >{{ $t('post.post') }}</el-button
              >
              <el-button @click="resetForm('ruleForm')">{{ $t('post.reset') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>


<script>
import { createPost } from "@/api/post";
import Vditor from "vditor";
import "vditor/dist/index.css";
import toolbar from "@/util/toolbar"

export default {
  name: "TopicPost",

  data() {
    return {
      contentEditor: {},
      ruleForm: {
        title: "",
        tags: [],
        content: "",
      },
      rules: {
        title: [
          {
            required: true,
            message: this.$t('post.blankTopic'),
            trigger: "blur",
          },
          {
            min: 1,
            max: 25,
            message: this.$t('post.errTopic'),
            trigger: "blur",
          },
        ],
      },
      submitting: false
    };
  },
  mounted() {
    this.contentEditor = new Vditor("vditor", {
      lang: this.$i18n.locale === 'zh' ? 'zh_CN': 'en_US',
      height: 500,
      placeholder: this.$t('post.enterContent'),
      theme: "classic",
      mode: "wysiwyg",
      icon: "material",
      tab: "    ",
      typewriterMode: true,
      toolbarConfig: {
        pin: true,
      },
      counter: {
        enable: true,
        type: "markdown",
      },
      cache: {
        enable: false,
      },
      preview: {
        maxWidth: 10000,
        delay: 0,
        hljs: {
          enable: true,
          lineNumber: true,
          style: "monokai",
        }
      },
      toolbar
    });
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            this.contentEditor.getValue().length === 1 ||
            this.contentEditor.getValue == null ||
            this.contentEditor.getValue() === ""
          ) {
            this.$message.error(this.$t('post.hintContent'));
            return false;
          }
          if (this.ruleForm.tags == null || this.ruleForm.tags.length === 0) {
            this.$message.error(this.$t('post.hintTag'));
            return false;
          }
          this.ruleForm.content = this.contentEditor.getValue();
          this.submitting = true;
          createPost(this.ruleForm).then((reponse) => {
            const { data } = reponse;
            setTimeout(() => {
              this.$router.push({
                name: "post-detail",
                params: { id: data.id },
              });
            }, 800);
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.contentEditor.setValue("");
      this.ruleForm.tags = "";
    },
  },
};
</script>

